<template>
  <div>
  
  <el-dialog
    title="即将到期业务提醒"
    :visible.sync="visible"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    center
  >
    <div class="expire-soon-content">
      <div class="flexs">
     
      <div class="warning-text">
        <div>* 您开通的以下服务即将到期，为了不影响您的使用，请及时续费。</div>
      </div>
      <div>* 如果已开启自动续费，请保持虞豆充足</div>
      </div>
      <el-table
        :data="expireList"
        border
        stripe
        v-loading="loading"
     
      >
        <el-table-column prop="serverName" align="center" label="服务名称" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="autoRenewal" label="自动续费" align="center" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.autoRenewal ==1 ? '已开启' :scope.row.autoRenewal ==2 ? '未开启':'不支持' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="closeTime" label="到期时间" align="center" min-width="160">
        </el-table-column>
        <el-table-column prop="remainingDays" label="剩余时长" align="center" min-width="120">
          <template slot-scope="scope">
            <span style="color: red;"> 不足{{ scope.row.restTime }}天</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.type != 5 && checkPermi(['home:renew:now'])"
              type="primary"
              size="mini"
              @click="handleRenew(scope.row)"
            >
              立即续费
            </el-button>

             <el-button
             v-if="scope.row.type == 5"
             type="text"
            >
            联系商务续期
            </el-button>

             <el-button
              v-if="scope.row.type != 5 && !checkPermi(['home:renew:now'])"
              type="text"
              style="color: #E6A23C;"
            >
            暂无权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div slot="footer" class="dialog-footer">
     
      <el-button type="primary" @click="handleClose">我知道了</el-button>
    </div>
  </el-dialog>
    <shopMonth ref="shopMonthRef" @success="init"></shopMonth>
    <div v-if="shopInfo">
       <apiOpenDialog :tenantId="userInfo.tenantId" :campNumber="shopInfo.campNumber" ref="apiOpenDialog" @success="init"></apiOpenDialog>
    </div>
    
      <moduleOpenDialog v-if="shopInfo && shopInfo.tenantId" :tenantId="shopInfo.tenantId"
      :campNumber="shopInfo.campNumber" :serverIndex="serverIndex" ref="moduleOpenDialog" @success="init"></moduleOpenDialog>


       <!-- 云机租用/续费弹窗 -->
        <CloudMachineDialog :visible.sync="dialogVisible" :type="dialogType" :machine-data="selectedMachine"
            :yudou="yudou" @success="init" @close="handleDialogClose" />

  </div>
</template>

<script>
import homeApi from "@/api/home/newIndex";
import { mapGetters } from "vuex";
import shopMonth from "@/views/tenantPages/jifen/components/shopMonth"

import apiOpenDialog from "@/components/tenant/apiOpenDialog.vue";
import moduleOpenDialog from "@/components/tenant/moduleOpenDialog.vue";
import CloudMachineDialog from '@/views/tenantPages/cloudMachine/components/CloudMachineDialog.vue'
export default {

  name: "ExpireSoonDialog",
  components: { shopMonth ,apiOpenDialog,moduleOpenDialog ,CloudMachineDialog},
   computed: {
   ...mapGetters(["userInfo", "shopInfo",])},
  data() {
    return {
      visible: false,
      loading: false,
       dialogType: 'renew',
      expireList: [],
      dialogVisible:false,
selectedMachine: {},
yudou:'',
serverIndex:""
    };
  },
beforeDestroy() {
  window.removeEventListener('beforeunload', this.handleUnload);
},
  mounted() {
  window.addEventListener('beforeunload', this.handleUnload);
},
  methods: {
      handleUnload() {
    localStorage.removeItem('serverIndex');
  },
    init() {
         const index = this.expireList.findIndex(item => item.serverIndex === this.serverIndex);
        if (index > -1) {
           this.expireList.splice(index, 1);
       }
    },
    open(data) {
      this.visible = true;
       this.expireList = data || [];
    },
    
     handleClose() {
      localStorage.removeItem('serverIndex');
       this.visible = false;
       // 通知父组件用户已关闭弹窗，记录今天已显示过
       this.$emit('closed');
     },
    handleRenew(row) {
      // 根据类型不同 调不同的续费逻辑
      // !!!! type 为前后端统一,  1 基础服务, 2 商城服务, 3 小服务, 4 接口, 5 脚本, 6 云机
      let info = row.info
      this.serverIndex = row.serverIndex
      
      switch (row.type) {
        case 1:
          localStorage.setItem('serverIndex', row.serverIndex);
          this.initBaseServer()
          break;
        case 2:
           localStorage.setItem('serverIndex', row.serverIndex);
           this.initShopServer()
          // this.$refs.shopMonthRef.open('基础服务包', 'baseServer', info. || 0);
          break;
        case 3:
        info.business.id = row.info.server.id
         this.$refs.moduleOpenDialog.open(info.business, 2, 1);
          break;
        case 4:
          row.info.business.businessId = row.info.business.id
          row.info.business.id = row.info.server.valueAddedServiceId 
          row.info.business.name = row.serverName 

          console.log(info.business.businessId,999)
          this.$refs.apiOpenDialog.open(row.info.business,2)
         
          break;
        case 6:
          this.yunjiUpdate(row.info)
      }
    },
       // 弹窗关闭回调
        handleDialogClose() {
            this.dialogVisible = false
            this.selectedMachine = {}
        },

   async initBaseServer() {
    const res = await this.getDicts('byfw');
     const foundItem = res.data.find(item => item.dictLabel === 'baseServer');
     this.$refs.shopMonthRef.open('基础服务包', 'baseServer',foundItem.dictValue || 0);
    },
    async initShopServer() {
      const res = await this.getDicts('byfw');
       const foundItem = res.data.find(item => item.dictLabel === 'shopServer');
      this.$refs.shopMonthRef.open('自营商城包', 'shopServer', foundItem.dictValue || 0);
    },  
    async yunjiUpdate(data) {
        const res = await this.getDicts('machine') 
        const foundItem = res.data.find(item => item.dictLabel === 'amount');
        if (foundItem) {
            this.yudou = foundItem.dictValue;
        }
             
         
          // 打开续费弹窗
            this.selectedMachine = {
                machineId: data.machineId, // 云机编号
                expireTime: data.leaseEndTime, // 到期时间
                id: data.id,
                renewal:data.renewal
            }
            this.dialogVisible = true
       
    },
    getRemainingDaysType(days) {
      if (days === undefined || days === null) return 'info';
      if (days <= 0) return 'danger';
      if (days <= 3) return 'warning';
      if (days <= 7) return 'primary';
      return 'success';
    }
  }
};
</script>

<style scoped>
.expire-soon-content {
  text-align: center;
}

.warning-icon {
  margin-bottom: 15px;
}

.warning-text {
  margin-bottom: 10px;
  color: #606266;
  font-size: 14px;
}

.dialog-footer {
  text-align: center;
}
.flexs {
  margin-bottom: 10px;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    text-align: left;
}
</style>
